<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>简历编辑</title>
    <style>
        body {
            font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
            background-color: #f5f5f5;
            margin: 0;
            padding: 20px;
            display: flex;
            justify-content: center;
        }
        
        .container {
            width: 750px;
            max-width: 100%;
        }
        
        .header {
            text-align: center;
            margin-bottom: 30px;
        }
        
        .header h1 {
            color: #333;
            font-size: 24px;
            margin-bottom: 10px;
        }
        
        .edit-form {
            background-color: white;
            border-radius: 8px;
            padding: 30px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }
        
        .form-group {
            margin-bottom: 20px;
        }
        
        .form-group label {
            display: block;
            margin-bottom: 8px;
            font-weight: bold;
            color: #555;
        }
        
        .form-group input, 
        .form-group select,
        .form-group textarea {
            width: 100%;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 14px;
            box-sizing: border-box;
        }
        
        .form-row {
            display: flex;
            gap: 15px;
        }
        
        .form-row .form-group {
            flex: 1;
        }
        
        .section-title {
            font-size: 18px;
            color: #333;
            margin: 25px 0 15px;
            padding-bottom: 8px;
            border-bottom: 1px solid #eee;
        }
        
        .skill-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-top: 10px;
        }
        
        .skill-tag {
            background-color: #e3f2fd;
            color: #1976d2;
            padding: 5px 10px;
            border-radius: 15px;
            font-size: 12px;
            display: flex;
            align-items: center;
        }
        
        .skill-tag .remove {
            margin-left: 5px;
            cursor: pointer;
        }
        
        .add-skill {
            display: flex;
            margin-top: 10px;
        }
        
        .add-skill input {
            flex: 1;
            margin-right: 10px;
        }
        
        .add-skill button {
            background-color: #1976d2;
            color: white;
            border: none;
            padding: 0 15px;
            border-radius: 4px;
            cursor: pointer;
        }
        
        .btn-group {
            display: flex;
            justify-content: space-between;
            margin-top: 30px;
        }
        
        .btn {
            padding: 12px 25px;
            border-radius: 4px;
            font-size: 16px;
            cursor: pointer;
        }
        
        .btn-save {
            background-color: #1976d2;
            color: white;
            border: none;
        }
        
        .btn-cancel {
            background-color: white;
            color: #666;
            border: 1px solid #ddd;
        }
        
        .avatar-upload {
            display: flex;
            align-items: center;
            margin-bottom: 20px;
        }
        
        .avatar-preview {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            background-color: #e3f2fd;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 20px;
            overflow: hidden;
        }
        
        .avatar-preview img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .avatar-upload-btn {
            background-color: #f5f5f5;
            color: #666;
            border: 1px dashed #ddd;
            padding: 8px 15px;
            border-radius: 4px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>编辑简历</h1>
        </div>
        
        <div class="edit-form">
            <div class="avatar-upload">
                <div class="avatar-preview">
                    <span>头像</span>
                </div>
                <button class="avatar-upload-btn">上传头像</button>
            </div>
            
            <div class="section-title">基本信息</div>
            <div class="form-row">
                <div class="form-group">
                    <label for="name">姓名</label>
                    <input type="text" id="name" placeholder="请输入姓名">
                </div>
                <div class="form-group">
                    <label for="gender">性别</label>
                    <select id="gender">
                        <option value="">请选择</option>
                        <option value="male">男</option>
                        <option value="female">女</option>
                    </select>
                </div>
            </div>
            
            <div class="form-row">
                <div class="form-group">
                    <label for="birthday">出生日期</label>
                    <input type="date" id="birthday">
                </div>
                <div class="form-group">
                    <label for="phone">联系电话</label>
                    <input type="tel" id="phone" placeholder="请输入联系电话">
                </div>
            </div>
            
            <div class="form-group">
                <label for="email">电子邮箱</label>
                <input type="email" id="email" placeholder="请输入电子邮箱">
            </div>
            
            <div class="form-group">
                <label for="address">居住地址</label>
                <input type="text" id="address" placeholder="请输入居住地址">
            </div>
            
            <div class="section-title">求职意向</div>
            <div class="form-group">
                <label for="position">期望职位</label>
                <input type="text" id="position" placeholder="请输入期望职位">
            </div>
            
            <div class="form-group">
                <label for="salary">期望薪资</label>
                <input type="text" id="salary" placeholder="请输入期望薪资">
            </div>
            
            <div class="form-group">
                <label for="city">期望工作城市</label>
                <input type="text" id="city" placeholder="请输入期望工作城市">
            </div>
            
            <div class="section-title">教育背景</div>
            <div class="form-row">
                <div class="form-group">
                    <label for="school">学校名称</label>
                    <input type="text" id="school" placeholder="请输入学校名称">
                </div>
                <div class="form-group">
                    <label for="degree">学历</label>
                    <select id="degree">
                        <option value="">请选择</option>
                        <option value="high-school">高中</option>
                        <option value="college">大专</option>
                        <option value="bachelor">本科</option>
                        <option value="master">硕士</option>
                        <option value="phd">博士</option>
                    </select>
                </div>
            </div>
            
            <div class="form-row">
                <div class="form-group">
                    <label for="major">专业</label>
                    <input type="text" id="major" placeholder="请输入专业">
                </div>
                <div class="form-group">
                    <label for="graduation">毕业时间</label>
                    <input type="date" id="graduation">
                </div>
            </div>
            
            <div class="section-title">工作经历</div>
            <div class="form-group">
                <label for="company">公司名称</label>
                <input type="text" id="company" placeholder="请输入公司名称">
            </div>
            
            <div class="form-row">
                <div class="form-group">
                    <label for="job-title">职位名称</label>
                    <input type="text" id="job-title" placeholder="请输入职位名称">
                </div>
                <div class="form-group">
                    <label for="industry">所属行业</label>
                    <input type="text" id="industry" placeholder="请输入所属行业">
                </div>
            </div>
            
            <div class="form-row">
                <div class="form-group">
                    <label for="start-date">开始时间</label>
                    <input type="date" id="start-date">
                </div>
                <div class="form-group">
                    <label for="end-date">结束时间</label>
                    <input type="date" id="end-date">
                </div>
            </div>
            
            <div class="form-group">
                <label for="job-description">工作内容</label>
                <textarea id="job-description" rows="4" placeholder="请输入工作内容"></textarea>
            </div>
            
            <div class="section-title">技能特长</div>
            <div class="form-group">
                <label>技能标签</label>
                <div class="skill-tags">
                    <div class="skill-tag">
                        JavaScript <span class="remove">×</span>
                    </div>
                    <div class="skill-tag">
                        HTML/CSS <span class="remove">×</span>
                    </div>
                    <div class="skill-tag">
                        Python <span class="remove">×</span>
                    </div>
                </div>
                <div class="add-skill">
                    <input type="text" placeholder="添加技能">
                    <button>+</button>
                </div>
            </div>
            
            <div class="form-group">
                <label for="self-intro">自我介绍</label>
                <textarea id="self-intro" rows="5" placeholder="请简要介绍自己"></textarea>
            </div>
            
            <div class="btn-group">
                <button class="btn btn-cancel">取消</button>
                <button class="btn btn-save">保存简历</button>
            </div>
        </div>
    </div>
    
    <script>
        // 简单的技能标签添加和删除功能
        document.querySelector('.add-skill button').addEventListener('click', function() {
            const input = document.querySelector('.add-skill input');
            const skill = input.value.trim();
            
            if (skill) {
                const tag = document.createElement('div');
                tag.className = 'skill-tag';
                tag.innerHTML = `${skill} <span class="remove">×</span>`;
                
                document.querySelector('.skill-tags').appendChild(tag);
                input.value = '';
                
                // 添加删除事件
                tag.querySelector('.remove').addEventListener('click', function() {
                    tag.remove();
                });
            }
        });
        
        // 为现有标签添加删除事件
        document.querySelectorAll('.skill-tag .remove').forEach(removeBtn => {
            removeBtn.addEventListener('click', function() {
                this.parentElement.remove();
            });
        });
    </script>
</body>
</html>
